layer = layui.layer

var register = new Vue({
    el: ".reg_form",
    data: {
        email: '',
        email_check: false,
        email_tipon: false,
        phone: '',
        phone_check: false,
        phone_tipon: false,
        phone_used: false,
        password: '',
        password_check: false,
        password_tipon: false,
        verpassword: '',
        verpassword_check: false,
        verpassword_tipon: false,
        safe_degree: '安全程度 <em class="ruo">弱</em>',
        name: '',
        name_check: false,
        name_tipon: false,
        qq: '',
        qq_check: false,
        qq_tipon: false,
        vercode: '',
        agree: false,

    },
    methods: {
        emailact: function() {
            if (this.email.length <= 0) {
                this.email_tipon = false
            } else {
                this.email_tipon = true
                    //邮箱 以字母或者数字1-9开头+(任意个数字字母下划线\-)+@+(任意字母数字)+.+(2-4个字母)
                const regEmail = /^[a-z1-9](?:\w|\-)+@[a-z\d]+\.[a-z]{2,4}$/i
                if (regEmail.test(this.email)) {
                    this.email_check = true
                } else {
                    this.email_check = false
                }
            }

        },
        nameact: function() {
            if (this.name.length <= 0) {
                this.name_tipon = false
            } else {
                this.name_tipon = true
                const regName = /^[\w\u4e00-\u9fa5]{2,18}$/ //用户名 2--18位数字,汉字,字母,下划线_
                if (regName.test(this.name)) {
                    this.name_check = true
                } else {
                    this.name_check = false
                }
            }

        },
        qqact: function() {
            if (this.qq.length <= 0) {
                this.qq_tipon = false
            } else {
                this.qq_tipon = true
                const regQQ = /^[1-9][0-9]{4,9}$/gim;
                if (regQQ.test(this.qq)) {
                    this.qq_check = true
                } else {
                    this.qq_check = false
                }
            }

        },
        phoneact: function() {
            if (this.phone.length <= 0) {
                this.phone_tipon = false
            } else {
                this.phone_tipon = true
                    //手机号 首个数字为1，后面10为任意数字
                const regMobile = /^[1][\d]{10}$/
                if (regMobile.test(this.phone)) {
                    this.phone_check = true
                } else {
                    this.phone_check = false
                }
            }
        },
        passwordact: function() {
            if (this.password.length <= 0) {
                this.password_tipon = false
            } else {
                this.verpasswordact()
                this.password_tipon = true
                    //密码 6--20位数字,字母,任意字符
                const regPassword = /^[\W\da-zA-Z_]{6,20}$/
                if (regPassword.test(this.password)) {
                    this.password_check = true
                    if (this.password.length <= 8) {
                        this.safe_degree = '安全程度 <em class="ruo">弱</em>'
                    } else if (this.password.length > 8 && this.password.length < 15) {
                        this.safe_degree = '安全程度 <em class="zhong">中</em>'
                    } else if (this.password.length >= 15) {
                        this.safe_degree = '安全程度 <em class="qiang">强</em>'
                    }

                } else {
                    this.password_check = false
                }
            }
        },
        verpasswordact: function() {
            if (this.verpassword.length <= 0) {
                this.verpassword_tipon = false
            } else {
                this.verpassword_tipon = true
                if (this.password == this.verpassword) {
                    this.verpassword_check = true
                } else {
                    this.verpassword_check = false
                }
            }
        },
        submit: function() {
            // console.log('提交')

            if (!this.email_check) return layer.alert('请检查邮箱', { icon: 2, skin: 'layer-ext-demo' })
            if (!this.phone_check) return layer.alert('请检查手机号', { icon: 2, skin: 'layer-ext-demo' })
            if (!this.password_check) return layer.alert('请检查密码格式', { icon: 2, skin: 'layer-ext-demo' })
            if (!this.verpassword_check) return layer.alert('输入的确认密码与原密码格式不一致', { icon: 2, skin: 'layer-ext-demo' })
            if (!this.name_check) return layer.alert('请检查昵称', { icon: 2, skin: 'layer-ext-demo' })
            if (!this.qq_check) return layer.alert('请检查qq号', { icon: 2, skin: 'layer-ext-demo' })
            if (!this.agree) return layer.alert('请勾选用户协议', { icon: 2, skin: 'layer-ext-demo' })
            let param = new URLSearchParams()
            param.append('email', this.email)
            param.append('phone', this.phone)
            param.append('password', this.password)
            param.append('name', this.name)
            param.append('qq', this.qq)
            axios.post("http://127.0.0.1:8000/user/", param).then(
                function(response) {

                    var resp = response.data
                    console.log(resp)
                    var msg = resp['content']
                    if (resp.response) {

                        layer.alert(msg && msg || '注册成功', {
                            icon: 1,
                            skin: 'layer-ext-demo' //见：扩展说明
                        })
                    } else {
                        layer.alert(msg && msg || '注册失败', {
                            icon: 2,
                            skin: 'layer-ext-demo' //见：扩展说明
                        })
                    }

                },
                function(err) {
                    console.log(err)
                    layer.alert('注册失败', {
                        icon: 2,
                        skin: 'layer-ext-demo' //见：扩展说明
                    })
                }
            )
        }
    }
})